<template>
  <div class="box">
    <h1>这是CompB组件,{{num}}</h1>
    <button @click="handleMin">触发状态机num减少</button>
    <ul>
      <li v-for="(item,index) in filterGoods" :key="index">
        名称:{{item.name}}
        价格:{{item.price}}
        数量:{{item.n}}
      </li>
    </ul>
  </div>
</template>

<script>
  import {mapState,mapGetters,mapMutations} from 'vuex'
  export default {
    computed: {
      // num() {
      //   return this.$store.state.count.num 
      // },
      // filterGoods(){
      //   return this.$store.getters['goods/goodsList']
      // }
      ...mapState({
        num:state=>state.count.num
      }),
      ...mapGetters({
        filterGoods:'goods/goodsList'
      })
    },
    methods: {
      // handleMin() {
      //   this.$store.commit('count/minus')
      // }
      ...mapMutations({
        handleMin:'count/minus'
      })
    },
  }
</script>

<style lang="less" scoped>
.box{
  width: 45%;
  border: 3px solid #333;
  height: 500px;
  float: left;
}
</style>